<template>
	<view class="page-order">
		<view class="order-wrap" v-if="order">
			<view class="status-block card">
				<view :class="['title', order.status]">{{ order.status_format }}</view>
				<!--        <view class="btn-primary mt-2" v-if="order.status == 'unpaid'" @click.stop="orderBtnChecked('pay')">
          {{ $t('account.order.list.btn_unpaid') }}
        </view> -->
				<template v-if="order.status == 'unpaid'">
					<image class="unpaid_code" mode="aspectFill" :src="collectionInfo?.collection_code"></image>
					<view class="c_address" @click="handleCopy(collectionInfo?.collection_address)">
						{{collectionInfo?.collection_address}}
					</view>
					<view class="btn-primary mt-2" @click.stop="handleConfirmPay">
						{{ $t('account.order.list.have_paid') }}
					</view>
				</template>

			</view>

			<view class="product-block card">
				<view class="card-title">{{ $t('account.order.info.product_info') }}</view>
				<view class="product-wrap">
					<view class="product" v-for="(product, index) in order.order_products" :key="index"
						@click="proxy.$util.navigateTo('/pages/product/product', { id: product.product_id })">
						<view class="left">
							<image class="image" :src="product.image" mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="name">{{ product.name }}</view>
							<view class="price">
								<view>{{ product.price }} x {{ product.quantity }}</view>
								<view v-if="order.status == 'completed'" class="btn-outline-gray inline"
									@click.stop="proxy.$util.navigateTo('/pages/account/rmas/form/index', { order_product_id: product.id })">
									{{ $t('account.order.info.apply_for_rma') }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="totals">
					<view class="total-list" v-for="(total, index) in order.order_totals" :key="index">
						<view class="left">{{ total.title }}</view>
						<view class="right">{{ total.value_format }}</view>
					</view>
				</view>
			</view>

			<view class="address-block card">
				<view class="card-title">{{ $t('account.order.info.shipping_address') }}</view>
				<view class="address">
					<view class="item">
						<view class="icon"><uni-icons type="person-filled" size="16"></uni-icons></view>
						<view class="info">{{ order.shipping_customer_name }} {{ order.shipping_telephone }}</view>
					</view>
					<view class="item">
						<view class="icon"><uni-icons type="location-filled" size="16"></uni-icons></view>
						<view class="info">
							{{
                proxy.$util.formatAddress({
                  zipcode: order.shipping_zipcode,
                  city: order.shipping_city,
                  zone: order.shipping_zone,
                  country: order.shipping_country,
                  address_1: order.shipping_address_1,
                  address_2: order.shipping_address_2,
                })
              }}
						</view>
					</view>
				</view>
			</view>

			<view class="address-block card">
				<view class="card-title">{{ $t('account.order.info.billing_address') }}</view>
				<view class="address">
					<view class="item">
						<view class="icon"><uni-icons type="person-filled" size="16"></uni-icons></view>
						<view class="info">{{ order.payment_customer_name }} {{ order.payment_telephone }}</view>
					</view>
					<view class="item">
						<view class="icon"><uni-icons type="location-filled" size="16"></uni-icons></view>
						<view class="info">
							{{
                proxy.$util.formatAddress({
                  zipcode: order.payment_zipcode,
                  city: order.payment_city,
                  zone: order.payment_zone,
                  country: order.payment_country,
                  address_1: order.payment_address_1,
                  address_2: order.payment_address_2,
                })
              }}
						</view>
					</view>
				</view>
			</view>

			<view class="address-block card">
				<view class="card-title">{{ $t('account.order.info.order_info') }}</view>
				<view class="item-wrap">
					<view class="item">
						<view class="title">{{ $t('account.order.info.order_number') }}</view>
						<view class="value">{{ order.number }}</view>
					</view>
					<view class="item">
						<view class="title">{{ $t('account.order.info.order_created_at') }}</view>
						<view class="value">{{ order.created_at }}</view>
					</view>
				</view>
			</view>

			<view class="histories-wrap card" v-if="order.order_shipments.length">
				<view class="card-title">{{ $t('account.order.info.shipment_info') }}</view>
				<view class="item" v-for="(history, index) in order.order_shipments" :key="index">
					<view class="top">
						<view class="left">{{ history.express_company }}</view>
						<view class="right">{{ history.created_at }}</view>
					</view>
					<view class="comment">{{ history.express_number }}</view>
				</view>
			</view>

			<view class="histories-wrap card">
				<view class="card-title">{{ $t('account.order.info.order_status') }}</view>
				<view class="item" v-for="(history, index) in order.order_histories" :key="index">
					<view class="top">
						<view class="left">{{ history.status_format }}</view>
						<view class="right">{{ history.created_at }}</view>
					</view>
					<view class="comment">{{ history.comment || $t('account.order.info.not_comment') }}</view>
				</view>
			</view>
			
			<!-- order.status != 'shipped' && order.status != 'cancelled' && order.status != 'completed' && order.status != 'paid' -->
			<view class="btn-wrap page-fixed-bottom"
				v-if="order.status == 'unpaid'">
				<view class="btn-outline-primary inline" @click.stop="orderCancel">
					{{ $t('account.order.list.btn_cancelled') }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
	} from 'vue';
	const {
		proxy
	} = getCurrentInstance()
	import {
		t
	} from '@/locale/index'
	import usePayment from '@/common/usePayment.js'

	let id = null
	const order = ref(null)
	const setting = uni.getStorageSync('settings');
	onLoad(e => {
		id = e.id
		loadData()

		nextTick(() => {
			uni.setNavigationBarTitle({
				title: t('account.order.info.heading_title')
			})
		})
	})

	const collectionInfo = computed(() => {
		return order.value?.payment_method_code ? setting.payment[order.value.payment_method_code] : ""
	});

	const loadData = () => {
		proxy.$http.get(`orders/${id}`).then(res => {
			order.value = res.data
		})
	}
	// 处理复制邀请码
	const handleCopy = (data) => {
		uni.setClipboardData({
			data,
			success: res => {
				proxy.$util.msg(t('account.home.copy_success'));
			}
		})
	}

	const orderBtnChecked = () => {
		usePayment(order.value.payment_method_code, order.value.id).then(res => {
			uni.redirectTo({
				url: `/pages/checkout/success/index?id=${id}`
			})
		}).catch(err => {
			// loadData()
		})
	}

	const orderCancel = () => {
		uni.showModal({
			title: t('common.text_hint'),
			content: t('account.order.info.order_cancel_confirm'),
			success: res => {
				if (res.confirm) {
					proxy.$http.post(`orders/${id}/cancel`).then(res => {
						loadData()
					})
				}
			}
		})
	}

	// 确认是否支付
	const handleConfirmPay = () => {
		proxy.$http.post(`orders/${id}/payConfirm`).then(res => {
			uni.redirectTo({
				url: `/pages/account/order/list/index?current=3`
			})
			// console.log(res, "确认是否支付");
			// loadData()
		})
	}

	onPullDownRefresh(() => {
		loadData()
	})
</script>

<style lang="scss" scoped>
	@import './index';
</style>